<!-- src/views/TestAdd.vue -->
<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="true">
    <div class="content_wrap">
      <div class="form-wrapper">
        <div class="experiment-form-container">
          <div class="form-header">
            <h2 class="form-title">试验记录新增</h2>
            <div class="header-divider"></div>
          </div>
          
          <a-form
            :model="formState"
            :rules="formRules"
            ref="formRef"
            layout="vertical"
            class="experiment-form"
          >
            <div class="form-fields-container">
              <a-form-item label="试验日期" name="experimentDate">
                <a-date-picker 
                  v-model:value="formState.experimentDate" 
                  placeholder="请选择试验日期"
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                  class="custom-input"
                  size="large"
                />
              </a-form-item>
              
              <a-form-item label="试验人员" name="experimentPersonnel">
                <a-input 
                  v-model:value="formState.experimentPersonnel" 
                  placeholder="请输入试验人员"
                  class="custom-input"
                  size="large"
                />
              </a-form-item>
              
              <a-form-item label="监督人员" name="supervisor">
                <a-input 
                  v-model:value="formState.supervisor" 
                  placeholder="请输入监督人员"
                  class="custom-input"
                  size="large"
                />
              </a-form-item>
              
              <a-form-item label="耐压时间(分钟)" name="withstandTime">
                <a-input-number 
                  v-model:value="formState.withstandTime" 
                  placeholder="请输入耐压时间"
                  :min="0"
                  style="width: 100%"
                  class="custom-input"
                  size="large"
                />
              </a-form-item>
              
              <a-form-item label="电压值(kV)" name="voltageValue">
                <a-input-number 
                  v-model:value="formState.voltageValue" 
                  placeholder="请输入电压值"
                  :min="0"
                  style="width: 100%"
                  class="custom-input"
                  size="large"
                />
              </a-form-item>
              
              <a-form-item label="局放上限(pC)" name="partialDischargeLimit">
                <a-input-number 
                  v-model:value="formState.partialDischargeLimit" 
                  placeholder="请输入局放上限"
                  :min="0"
                  style="width: 100%"
                  class="custom-input"
                  size="large"
                />
              </a-form-item>
            </div>
            
            <a-form-item class="form-actions">
              <a-button type="primary" @click="onSubmit" :loading="submitting" size="large" class="action-btn">
                <template #icon>
                  <CheckCircleOutlined />
                </template>
                开始试验
              </a-button>
              <a-button @click="onReset" size="large" class="action-btn reset-btn">
                <template #icon>
                  <RedoOutlined />
                </template>
                重置表单
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { CheckCircleOutlined, RedoOutlined } from '@ant-design/icons-vue'
import VScaleScreen from "v-scale-screen"

const formRef = ref()
const submitting = ref(false)
const router = useRouter()

const formState = reactive({
  experimentDate: null,
  experimentPersonnel: '',
  supervisor: '',
  withstandTime: null,
  voltageValue: null,
  partialDischargeLimit: null
})

const formRules = {
  experimentDate: [{ required: true, message: '请选择试验日期' }],
  experimentPersonnel: [{ required: true, message: '请输入试验人员' }],
  supervisor: [{ required: true, message: '请输入监督人员' }],
  withstandTime: [{ required: true, message: '请输入耐压时间' }],
  voltageValue: [{ required: true, message: '请输入电压值' }],
  partialDischargeLimit: [{ required: true, message: '请输入局放上限' }]
}

const onSubmit = async () => {
  try {
    await formRef.value.validateFields()
    submitting.value = true
    // 这里可以添加提交逻辑，例如调用 API
    console.log('提交数据:', formState)
    
    // 模拟提交延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    message.success('试验记录提交成功')
    
    // 跳转到 test 页面
    router.push('/test')
    
  } catch (error) {
    console.log('验证失败:', error)
    message.error('请检查表单填写内容')
  } finally {
    submitting.value = false
  }
}

const onReset = () => {
  Object.assign(formState, {
    experimentDate: null,
    experimentPersonnel: '',
    supervisor: '',
    withstandTime: null,
    voltageValue: null,
    partialDischargeLimit: null
  })
  message.info('表单已重置')
}
</script>

<style scoped>
.content_wrap {
  width: 100%;
  height: 100%;
  color: #333333;
  padding: 0;
  box-sizing: border-box;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
}

.form-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  padding: 20px;
  overflow-y: auto;
}

.experiment-form-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e5e5;
  position: relative;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.form-header {
  position: relative;
  z-index: 1;
  margin-bottom: 32px;
}

.form-title {
  color: #333333;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
}

.header-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #666666, transparent);
  width: 100%;
  margin: 0 auto;
}

.experiment-form {
  position: relative;
  z-index: 1;
}

.form-fields-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:deep(.ant-form-item) {
  margin-bottom: 0;
}

:deep(.ant-form-item-label) {
  padding-bottom: 8px;
}

:deep(.ant-form-item-label > label) {
  color: #333333;
  font-weight: 500;
  font-size: 16px;
}

.custom-input {
  background: #ffffff !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  color: #333333 !important;
  transition: all 0.3s;
  height: 48px;
  font-size: 16px;
}

.custom-input:hover {
  border-color: #40a9ff !important;
  box-shadow: 0 0 8px rgba(64, 169, 255, 0.2) !important;
}

.custom-input:focus {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.2) !important;
}

:deep(.ant-input::placeholder),
:deep(.ant-picker-input > input::placeholder) {
  color: #bfbfbf;
}

:deep(.ant-input-number-input) {
  background: transparent !important;
  color: #333333 !important;
}

.form-actions {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.action-btn {
  min-width: 160px;
  height: 48px;
  font-size: 16px;
  border-radius: 6px;
  margin: 0 16px;
  transition: all 0.3s;
}

:deep(.ant-btn-primary) {
  background: #1890ff;
  border: none;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

:deep(.ant-btn-primary:hover) {
  background: #40a9ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  transform: translateY(-2px);
}

.reset-btn {
  background: #f5f5f5 !important;
  border: 1px solid #d9d9d9 !important;
  color: #333333 !important;
}

.reset-btn:hover {
  background: #e6e6e6 !important;
  border-color: #bfbfbf !important;
  transform: translateY(-2px);
}

/* 滚动条样式优化 */
.form-wrapper::-webkit-scrollbar {
  width: 6px;
}

.form-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.form-wrapper::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .experiment-form-container {
    padding: 24px 16px;
  }
  
  .form-title {
    font-size: 24px;
  }
  
  .custom-input {
    height: 42px;
    font-size: 14px;
  }
  
  .action-btn {
    min-width: 130px;
    height: 42px;
    font-size: 14px;
    margin: 0 8px;
  }
}
</style>